<template>
  <my-dialog draggable :src="src" width="500px" height="400px">
    <template v-slot:title>
      <el-button size="mini" icon="el-icon-back" @click="handleBack"></el-button>
      {{title}}
    </template>
  </my-dialog>
</template>

<script>
  import {on} from '$ui/utils/bridge'
  import Messager from '$ui/utils/messager'

  export default {
    name: 'AppDialog',
    props: {
      src: String
    },
    data() {
      return {
        title: '',
        messager: null,
        appName: null
      }
    },
    methods: {
      handleBack() {
        this.messager && this.messager.fire('AppNavBack', {
          appName: this.appName
        })
      }
    },
    created() {

      this.inst = on('ConnectApp', (data, bridge) => {
        this.title = data.title
        this.appName = data.appName
        this.messager = new Messager({
          bridge: bridge,
          origin: '/assets/bridge/index.html'
        })

      })

    },
    beforeDestroy() {
      this.messager && this.messager.destroy()
      this.inst && this.inst.destroy()
    }
  }
</script>

<style scoped>

</style>
